@import 'nib'

v_font_size
  font-size 14px

[v-cloak]
  display none

body, html 
  height 100%
  -webkit-tap-highlight-color transparent

body
  font-family: "Helvetica Neue", "Helvetica", "Lucida Grande", "Arial", "Hiragino Sans GB", "Microsoft Yahei", "WenQuanYi Micro Hei", "sans-serif"
  font-size v_font_size
  font-weight normal
  overflow-x hidden
  background-color #fff

html, body, div, span, object, iframe, table, caption, tbody, tfoot, thead, tr, th, td, del, dfn, em, img, ins, kbd, q, samp, small, strike, strong, sub, sup, tt, var, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, dl, dt, dd, ol, ul, li, fieldset, form, label, legend
  padding 0
  margin 0
  border 0
  font-weight normal

ul,li
  list-style none none
a
  color #333
  text-decoration none
  &:hover
    text-decoration none

v_inline
  display inline-block
  *display inline
  _display inline
  *zoom 1
  _zoom 1

inline-img(url, w, h)
  background url(url) no-repeat
  width w
  height h
  @extend v_inline

.loadding
  width 100%
  text-align center
  .load-txt
    margin-bottom 20px
    clear both
  .load-ico
    inline-img('../img/loadding.gif', 32px, 32px)

.loaded-fail
  text-align center

.c-hidden
  display none

.c-vhidden
  visibility hidden

// 导航条
.bread-nav
  width 100%
  padding 20px 0
  font-size .8em
  line-height 1em
  color #999
  border-bottom 1px solid #eee;
  .crumbs
    background url('../img/home.png') no-repeat 5px 0
    padding-left 22px
    line-height 1.2em
    a
      color #999
    span
      color #333
.c-content
  margin-right auto
  margin-left auto

//- Vue-Router过渡动画
.fade-enter-active, .fade-leave-active
  transition: opacity .5s ease

.fade-enter, .fade-leave-active
  opacity: 0

.child-view
  position: absolute
  transition: all .5s cubic-bezier(.55,0,.1,1)

.slide-left-enter, .slide-right-leave-active
  opacity: 0
  -webkit-transform: translate(30px, 0)
  transform: translate(30px, 0)

.slide-left-leave-active, .slide-right-enter
  opacity: 0
  -webkit-transform: translate(-30px, 0)
  transform: translate(-30px, 0)

.c-select-bar
  display -webkit-box
  display -webkit-flex
  display flex
  position fixed
  z-index 500
  bottom 0
  padding 0.5em
  background-color rgba(255,255,255,0.6)

.button-success,
.button-error,
.button-warning,
.button-secondary
  color white
  border-radius 4px
  text-shadow 0 1px 1px rgba(0, 0, 0, 0.2)

.button-success
  background rgb(28, 184, 65) /* this is a green */

.button-error
  background rgb(202, 60, 60) /* this is a maroon */

.button-warning
  background rgb(223, 117, 20) /* this is an orange */

.button-secondary
  background rgb(66, 184, 221) /* this is a light blue */


@media (min-width: 1201px)
  .c-content
    max-width 1200px
    min-height 36em
@media (max-width: 1200px) and (min-width: 1001px)
  .c-content
    max-width 100% !important
    min-height 36em
    .bread-nav .crumbs
      margin-left 1.25em
@media (max-width: 1000px) and (min-width: 601px)
  .c-content
    max-width 100% !important
    .bread-nav .crumbs
      margin-left 1.25em
@media (max-width: 600px) and (min-width: 320px)
  .bread-nav
    display none
  .c-content
    padding-bottom 1em